<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../../js/jquery-1.11.1.js"></script>
		<title></title>
	</head>
	<div>方式一:利用form的onsubmit，函数中返回false表示拦截，返回true表示继续执行提交动作
	<form name="form1" action="" method="post" onsubmit="return validateForm()" ;>
		<input type="text" id="input1" name="input1" />
		<input type="submit" value="submit" />
		<button type="submit">submitButton</button>
	</form>
	<script>
			function validateForm() {
				if($("#input1").val() == "") {
					alert("please input1! ");
					return false;
				}
				return true;
			}
		</script>
	</div>
	
	<div>方式二：利用input类型为submit组件的onclick事件，return false表示阻止提交，return true表示继续提交动作
	<form  name="form2" action="" method="post" ;>
		<input type="text" id="input2" name="input2" />
		<input type="submit" value="submit" onclick="return validateForm2();"/>
		<button type="submit">submitButton</button>
	</form>
	<script>
			function validateForm2() {
				if($("#input2").val() == "") {
					alert("please input2! ");
					return false;
				}
				return true;
			}
		</script>
	</div>
	
	<div>方式三：利用button组件的onclick事件，然后利用form.submit()函数手动提交
	<form name="form3" action="" method="post" ;>
		<input type="text" id="input3" name="input3" />
		<input type="button" value="inputButton" onclick="submitForm()"/>
	</form>
	<script>
			function submitForm() {
				if($("#input3").val() == "") {
					alert("please input3! ");
					return;
				}
				document.form3.submit();
			}
		</script>
	</div>
	
	<body>
	</body>

</html>